<template>
  <div id="product_list">
        <div class="category_name">{{this.$store.state.categoryName}}</div>
        <div class="item_list">
            <div class="item_product" :span="8" v-for="(item, index) in this.$store.state.productList"  :key="item.productId" @click="itemClick(item.productId)">
              <el-card :body-style="{ padding: '0px', margin: '10px 0'}" shadow="hover">
                <img :src="item.productLogoImg" class="image">
                <div style="padding: 14px;" class="item_name">
                  {{item.productName}}
                </div>
                <div class="item_price">{{item.productPrice}}元</div>
              </el-card>
          </div>
        </div>

  </div>
</template>

<script>
  export default {
    name: "Test",
    data() {
      return {
        currentDate: new Date()
      };
    },

    methods:{
      itemClick(productId){
        console.log(productId);
        //点击跳转路由， 并传递参数 商品对应id 过去
        this.$router.push({
          path: 'index/productDetail',
          query: {
            productId,
          }
        });
      }
    }
  }
</script>

<style scoped>
  #product_list{
    width: 100%;
  }
  .category_name{
    text-align: center;
    height: 44px;
    line-height: 44px;
    color: #FF6700;
  }

  .image {
    width: 100%;
    display: block;
  }

  .item_list{
    display: flex;
    margin-left: 13%;
    width: 87%;
    flex-wrap: wrap;
    margin-top: 1%;
    /*background-color: #F5F5F5;*/
  }
  .item_product{
    width: 20%;
    margin-left: 80px;
    margin-top: 2%;
  }

  .item_name{
    text-align: center;
  }

  .item_price{
    text-align: center;
    font-size: 10px;
    color: #FF6700;
  }
</style>
